<template>
	<view class="wrap">
		
		<!-- <view @click="$func.jump('/yCreate/pages/shoppingCart')" class="cart u-flex-col u-flex-center">
			<image src="@/static/wImg/cart1.png"></image>
			购物车
		</view> -->
		<image src="../../static/index/cart.png" mode="" @click="$func.jump('/yCreate/pages/shoppingCart')" class="cart"></image>
		<view class="top">
			<!-- <view :style="'height:' + top +'px'"></view> -->
			<!-- class="u-flex u-row-between" -->
			<view :style="'padding-top:' + statusBarHeight +'rpx'">
				<view class="u-flex top_add" @click="addShow = true">
					<view class="top_add_text">按地区选择商品 <text style="margin-left: 25rpx;">{{city}}</text> </view>
					<image src="@/static/wImg/blaSan.png" class="top_san"></image>
				</view>
				<view class="u-flex top_sea flex-one">
					<image src="@/static/wImg/greySea.png" class="top_sea_img"></image>
					<input type="text" @input="mescroll.resetUpScroll()" v-model="keywords"
						placeholder-style="color:#B0B0B0;" placeholder="输入您想要的内容">
				</view>
			</view>
			<scroll-view class="u-flex claWrap" scroll-x :scroll-into-view="scrollID">
				<block v-for="(item, index) in list" :key="index">
					<view class="claItem u-flex-col u-flex-center" @click="claClick(index,item.id)"
						:class="cateid == item.id ? 'claCss' : ''" :id="`tab_${index + 1}`">
						<image :src="item.image"></image>
						<view class="cla_text u-flex-center">{{item.name}}</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="foot">
			<view class="fot_left" >
				<view class="left_item u-flex-center" @click="leftClick(index)"
					:class="index == leftIndex ? 'left_css' :''" v-for="item,index in LeftList" :key="index">
					{{item.name}}
					<view class="left_line" v-if="index == leftIndex"></view>
				</view>
			</view>
			<view class="fot_right">
				<!-- <image src="@/static/yCreate/ceshi.png" mode="aspectFill" class="rig_img"></image> -->
				<!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="rig_img">
					<swiper-item style="width: 100%;height: 100%;" v-for="(item,index) in banner" :key="index">
						<view class="swiper-item">
							
						</view>
					</swiper-item>
				</swiper> -->
				<!-- <image :src="configInfo.cate_img_url" mode="aspectFill" class="rig_img" @click="goRich(4)"></image> -->
				<!-- <view class="flex align-center margin-top-20">
					<image src="../../static/logo.png" mode="" class="shopimg"></image>
					<view class="flex-one margin-left-20">
						<view class="rig_tit text-26 text-bold text-cut-two height-70 line-35">
							<text class="mark markGreen">平台</text>
							标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
						</view>
						<view class="demo-tag margin-top-15">
							<view class="demo-tag-text">
								标签
							</view>
						</view>
						<view class="demo-price">
							<text>￥</text>111
							<text class="demo-price-grey">￥222</text>
						</view>
					</view>
				</view> -->
				<mescroll-body :sticky="true" @init="mescrollInit" @down="downCallback" @up="upCallback" :height="1">
					<view>
						<view class="right_item u-flex" @click="$func.jump('/wNew/pages/detail?id=' + item.id)"
							v-for="item in flowList">
							<image :src="item.image" mode="aspectFill" class="rig_item_img"></image>
							<view style="flex: 1;">
								<view class="rig_tit" style="margin-top: 20rpx;display:flex;display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;flex:1;line-height:40rpx;">
									<text class="mark markGreen" v-if="item.shop.isself == 1">平台</text>
									<text class="mark" v-else>商家</text>
									<text
                                        class="mark markOra"
                                        v-if="item.platform_ms == 1"
                                        >秒杀</text
                                    >
                                    <text
                                        class="mark markOra"
                                        v-if="item.platform_bk == 1"
                                        >折扣</text
                                    >
									{{item.title}}
								</view>
								<view class="demo-tag">
									<view class="demo-tag-text" v-for="(items,indexs) in item.json" :key="indexs">
										{{items}}
									</view>
								</view>
								<view class="demo-price">
									<text>￥</text>{{item.price}}
									<text class="demo-price-grey">￥{{item.hx_price}}</text>
								</view>
							</view>
						</view>
						
					</view>
				</mescroll-body>
			</view>
		</view>
		<u-tabbar v-model="current" @change="changeTab" height="55px" active-color="#606DCE" inactive-color="#888"
			:list="tabList"></u-tabbar>
		<!-- <u-picker v-model="addShow" mode="region"></u-picker> -->
		<view class="layer" v-if="addShow">
			<view class="layer-content">
				<view
					class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between">
					<view class="text-cc" @click="addShow=false">取消</view>
					<view class="" style="color:#007aff;" @click="adresSubmit()">确定</view>
				</view>
				<picker-view :value="multiIndex" :indicator-style="indicatorStyle" class="picker-view"
					@change="changeAdres">
					<picker-view-column>
						<view class="item-pircker" v-for="(item,index) in arealist1" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="arealist2">
						<view class="item-pircker" v-for="(item,index) in arealist2" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="arealist3">
						<view class="item-pircker" v-for="(item,index) in arealist3" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				scrollID: 'tab_1',
				scrollID2: "",
				top: 0,
				addShow: false,
				claIndex: 0,
				leftIndex: 0,
				list: [],
				flowList: [],
				LeftList: [],
				keywords: '',
				tabList: [{
						iconPath: "/static/tab/shouye_nor.png",
						selectedIconPath: "/static/tab/shouye_sel.png",
						text: '首页',
					},
					{
						iconPath: "/static/tab/cate_nor.png",
						selectedIconPath: "/static/tab/cate_sel.png",
						text: '分类',
					},
					{
						iconPath: "/static/tab/live_nor.png",
						selectedIconPath: "/static/tab/live_sel.png",
						text: '直播',
					},
					{
						iconPath: "/static/tab/dynamic_nor.png",
						selectedIconPath: "/static/tab/dynamic_sel.png",
						text: '动态',
					},

					{
						iconPath: "/static/tab/wode_nor.png",
						selectedIconPath: "/static/tab/wode_sel.png",
						text: '我的',
					},
				],
				current: 1,
				banner: "",
				arealist1: [],
				arealist2: [],
				arealist3: [],
				areaname: "",
				multiIndex: [0, 0, 0],
				indicatorStyle: 'height: 80rpx;',
				city: "全国",
				cateid: "",
				statusBarHeight: 0,
				flid:"",
				location_city:"",
				location_city2:"",
			}
		},
		    watch: {
        tabList: {
            handler(newVal, oldVal) {
                if (
                    newVal[2].text == "直播" &&
                    uni.getStorageSync("configInfo").live_switch == 0
                )
                    return newVal.splice(2, 1);
            },
            deep: true,
            immediate: true,
        },
    },
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		onLoad(options) {
			console.log(options,'options')
			if(options.second){
				this.cateid = options.second
			}
			if(options.third){
				this.leftIndex = options.third
			}
			if(options.rowIndex){
				this.scrollID2 = `tab_${Number(options.rowIndex) + 1}`
				console.log(this.scrollID,'this.scrollID');
			}
			uni.getSystemInfo({
				success: (res) => {
					// 状态栏的高度
					this.statusBarHeight = res.statusBarHeight + 30;
				}
			});
			if (options.id) {
				// this.cateid = options.id
				this.flid = options.id
				uni.setStorageSync('category_id', options.id)
				// this.LeftList = this.list[this.claIndex].childlist
			}
			if (uni.getStorageSync('city')) {
				this.city = '全国'
			} else {
				this.city = '全国'
			}
			let res = uni.getSystemInfoSync()
			if (res.safeAreaInsets.top == 0) {
				this.top = 20;
			} else {
				this.top = res.safeAreaInsets.top;
			}
			this.classFn()
			this.$u.post('/api/index/area_list', {}).then(res => {
				if (res.code == 1) {
					var address = res.data
					this.arealist1 = address
					this.arealist2 = address[0].children
					this.arealist3 = address[0].children[0].children
				}
			})
		},
		methods: {
			claClick(index, id) {
				this.cateid = id
				this.claIndex = index
				this.leftIndex = 0
				this.LeftList = this.list[this.claIndex].childlist
				this.mescroll.resetUpScroll();
				uni.setStorageSync('category_id', id)
			},
			leftClick(index) {
				this.leftIndex = index
				this.mescroll.resetUpScroll();
			},
			classFn() {
				this.$u.post('/api/index/get_category',{
					category_id:this.flid
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data.category
						if (this.cateid) {
							let index = res.data.category.findIndex(item => item.id == this.cateid);
							console.log(index)
							let timeindex = index == -1 ? 0 : index;
							this.cateid = this.cateid?this.cateid:res.data.category[timeindex].id
							this.LeftList = this.list[timeindex].childlist
							
							uni.setStorageSync('category_id', this.cateid)
						} else {
							this.cateid = this.cateid?this.cateid:res.data.category[0].id
							this.LeftList = this.list[this.claIndex].childlist
							uni.setStorageSync('category_id', this.cateid)
						}
						this.banner = res.data.banner
						setTimeout(() => {
							this.mescroll.resetUpScroll();
							this.scrollID = this.scrollID2
						}, 300)
					}
				});
			},
			upCallback(page) {
				this.mescroll.optDown.use = false;
				this.mescroll.optUp.textNoMore = '- 已经到底啦 -'
				this.$u.post('/api/wanlshop/product/lists', {
					page: page.num,
					// limit: page.size,
					search: this.keywords,
					sort: 'weigh',
					order: 'asc',
					filter: JSON.stringify({
						"category_id": this.LeftList[this.leftIndex].id
					}),
					op: '{"category_id": "in"}',
					type: 'goods',
					location_city: this.location_city,
					location_city2:this.location_city2
				}).then(res => {
					this.mescroll.endBySize(res.data.data.length, res.data.total);
					if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
					this.flowList = this.flowList.concat(res.data.data); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			changeTab(e) {
				if (e == 0) {
					this.$func.jump('/wNew/pages/index')
				} else if (e == 3) {
					this.$func.jump('/pages/dyamicshop?children=2')
				} else if (e == 2) {
					this.$func.jump('/live/pages/live/liveList?type=1')
				} else if (e == 4) {
					this.$func.jump('/subPages/technician/tabBar/mine')
				}
			},
			changeAdres(e) {
				let curMultiIndex = e.detail.value
				if (curMultiIndex[0] != this.multiIndex[0]) {
					this.multiIndex = [curMultiIndex[0], 0, 0]
				} else if (curMultiIndex[1] != this.multiIndex[1]) {
					this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0]
				} else if (curMultiIndex[2] != this.multiIndex[2]) {
					this.multiIndex = [this.multiIndex[0], this.multiIndex[1], curMultiIndex[2]]
				}
				console.log(this.multiIndex)
				var i = this.multiIndex[0]
				var j = this.multiIndex[1]
				var k = this.multiIndex[2]
				this.arealist2 = this.arealist1[i].children
				this.arealist3 = this.arealist1[i].children[j].children
				console.log(this.cateid)
			},
			adresSubmit() {
				var i = this.multiIndex[0]
				var j = this.multiIndex[1]
				var k = this.multiIndex[2]
				var dz = this.arealist1[i].name + '/' + this.arealist1[i].children[j].name
				var dy = this.arealist1[i].name+ '/' + this.arealist1[i].children[j].name + '/' + this.arealist1[i].children[j].children[k].name
				this.location_city = dz
				this.location_city2 = dy
				uni.setStorageSync('location_city',dz)
				uni.setStorageSync('location_city2',dy)
				this.city = this.arealist1[i].name + '/' + this.arealist1[i].children[j].name + '/' + this.arealist1[i].children[j].children[k].name
				this.addShow = false
				this.$u.post('/api/wanlshop/product/lists', {
					page: 1,
					search: this.keywords,
					sort: 'weigh',
					order: 'asc',
					filter: JSON.stringify({
						"category_id": this.LeftList.length?this.LeftList[this.leftIndex].id:''
					}),
					op: '{"category_id": "in"}',
					type: 'goods',
					location_city: dz,
					location_city2: dy
				}).then(res => {
					this.mescroll.endBySize(res.data.data.length, res.data.total);
					this.flowList = res.data.data; //追加新数据
				})
				
			},
			goRich(type){
				uni.navigateTo({
					url: '/pages/rich?type=' + type
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url(@/components/common.css);
	.cart {
		width: 140rpx;
		height: 140rpx;
		position: fixed;
		bottom: 200rpx;
		border-radius: 50%;
		background: #fff;
		right: 20rpx;
		z-index: 9999;
		font-size: 28rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 7rpx;
		}
	}

	.wrap {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.top {
		padding: 20rpx 30rpx 50rpx;
		background-image: linear-gradient(to right, #DBDFFF, #DBDFFF);

		.top_add {

			.top_add_text {
				// width: 120rpx;
				font-size: 24rpx;
				overflow: hidden; // 文字超长隐藏
				text-overflow: ellipsis; // 显示...
				white-space: nowrap; // 单行显示
				display: flex;
    			align-items: center;
			}

			.top_san {
				width: 22rpx;
				height: 10rpx;
				margin-left: 10rpx;
			}
		}

		.top_sea {
			flex: 1;
			margin: 20rpx 0;
			height: 60rpx;
			padding: 0 18rpx;
			border-radius: 20rpx;
			background: #fff;
			border-radius: 10rpx 10rpx 10rpx 10rpx;

			.top_sea_img {
				width: 25rpx;
				height: 23rpx;
			}

			input {
				color: #B0B0B0;
				height: 20rpx;
				font-size: 24rpx;
				padding: 0 18rpx;
				margin-left: 18rpx;
				border-left: 1rpx solid #B0B0B0;
			}
		}

		.claWrap {
			margin-top: 30rpx;
			overflow-x: auto;
			overflow-y: hidden;

			.claItem {
				margin-right: 20rpx;

				image {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					background: #fff;
					// padding: 10rpx;
					margin-bottom: 16rpx;
				}

				.cla_text {
					width: 104rpx;
					height: 32rpx;
					font-size: 22rpx;
					border-radius: 40rpx;
				}
			}

			.claCss {
				image {
					border: 1rpx solid #606DCE;
				}

				.cla_text {
					color: #fff;
					background: #606DCE;
				}
			}
		}
	}

	.foot {
		flex: 1;
		margin-top: 12rpx;
		position: relative;

		.fot_left {
			width: 200rpx;
			background: #fff;
			position: absolute;
			top: 0;
			bottom: 0rpx;
			overflow-y: auto;

			.left_item {
				height: 88rpx;
				background: #fff;
				position: relative;
			}

			.left_line {
				width: 6rpx;
				height: 60rpx;
				position: absolute;
				top: 15rpx;
				left: 0;
				background: #606DCE;
				border-radius: 40rpx;
			}

			.left_css {
				background: #DBDFFF;
			}
		}

		.fot_right {
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			left: 200rpx;
			bottom: 0rpx;
			padding: 0 30rpx;
			overflow-y: auto;

			.rig_img {
				width: 504rpx;
				height: 208rpx;
				border-radius: 20rpx;
			}

			.right_item {
				background: #FFF;
				border-radius: 20rpx;
				padding: 10rpx;
				margin-top: 20rpx;

				.rig_item_img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.rig_tit {
					font-size: 26rpx;
					color: #333;
					font-weight: bold;
				}

				.mark {
					white-space: nowrap;
					font-size: 20rpx;
					color: #fff;
					padding: 6rpx 10rpx;
					background: #ef5205;
					border-radius: 4rpx;
					margin-right: 10rpx;
				}

				.markGreen {
					background: #606DCE;
				}

				.demo-tag {
					display: flex;
					margin-top: 5px;
				}

				.demo-tag-text {
					margin-bottom: 10rpx;
					border: 1px solid #F43000;
					color: #F43000;
					margin-left: 8px;
					line-height: 1;
					padding: 8rpx 24rpx 8rpx 16rpx;
					display: flex;
					align-items: center;
					border-radius: 4rpx;
					font-size: 20rpx;
				}

				.demo-tag-text-grey {
					border: 1px solid #999;
					color: #999;
				}

				.demo-price {
					font-size: 30rpx;
					color: $u-type-error;
					font-weight: bold;
					font-size: 32rpx;

					text {
						font-size: 20rpx;
					}

					.demo-price-grey {
						color: #D3D3D3;
						font-size: 20rpx;
						font-weight: 400;
						margin-left: 18rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999
	}

	.layer-content {}

	/* 浮层内容 */
	.confirm-bar {
		position: fixed;
		bottom: 600rpx;
		left: 0;
		width: 750rpx;
	}

	.line-height-80 {
		height: 80rpx;
		line-height: 80rpx;
	}

	.padding-lr-30 {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.bg-ff {
		background: #fff;
	}

	.border-bottom-ed {
		border-bottom: 1rpx solid #ededed;
	}

	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.picker-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 600rpx;
		background: #fff;
	}

	.item-pircker {
		line-height: 80rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.shopimg{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}
	.mark {
		font-size: 20rpx;
		color: #fff;
		padding: 6rpx 10rpx;
		background: #ef5205;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}
	.demo-tag {
		display: flex;
		flex-wrap: wrap;
		margin-top: 5px;
		margin-left: -8rpx;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		margin-bottom: 10rpx;
		border: 1px solid #F43000;
		color: #F43000;
		margin-left: 8px;
		line-height: 1;
		padding: 8rpx 24rpx 8rpx 24rpx;
		display: flex;
		align-items: center;
		border-radius: 4rpx;
		font-size: 20rpx;
	}
	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
		font-weight: bold;
		font-size: 32rpx;
	
		text {
			font-size: 20rpx;
		}
	
		.demo-price-grey {
			color: #D3D3D3;
			font-size: 20rpx;
			font-weight: 400;
			margin-left: 18rpx;
			text-decoration: line-through;
		}
	}
	/deep/.uni-scroll-view-content{
		display: flex;
	}
</style>